<template>
  <div  class="page-layout">
   <h1>DvPage</h1>
   <p>大屏页面组件，大屏项目的根节点</p>
   <h2>主要功能</h2>
   <ul>
    <li>锁定比例</li>
    <li>比例自动调整</li>
    <li>整体风格主题配置（联动内部图表组件）</li>
    <li>全屏</li>
   </ul>

   <h2>example1</h2>
   <div>dv-page 的默认比例为1920 * 1080， 下面容器为 1066 * 600 , 内容自动缩放</div>
   <textarea readonly style="width: 600px; height: 50px">
      <dv-page  target="parent" ></dv-page>
    </textarea>
   <div style="height: 600px; width: 1066px; border:1px solid red; padding: 5px; "> 
    <dv-page  target="parent" >
      <h1>大屏页面</h1>
    </dv-page>
   </div>
   <br/><br/><br/>
   <h2>example2</h2>
   <div>若需要dv-page 适应容器宽高（无需缩放）</div>
   <textarea readonly style="width: 600px; height: 50px">
      <dv-page  target="parent" fit></dv-page>
    </textarea>
   <div style="height: 600px; width: 1066px;  ">
    <dv-page  target="parent" fit>
      <h1>大屏页面</h1>
    </dv-page>
   </div>
   <br/><br/><br/>

   <h2>example3</h2>
   <div>自定义大屏比例</div>
   <textarea readonly style="width: 600px; height: 50px">
      <dv-page  target="parent" :lock="false" :width="900" :height="900"></dv-page>
    </textarea>
   <div style="height: 900px; width: 900px;  ">
    <dv-page  target="parent" :lock="false" :width="900" :height="900">
      <h1>大屏页面 900 * 900</h1> 
      
    </dv-page>
   </div>
   <br/> 

   <h2>example4</h2>
   <div>全屏</div>
   <textarea readonly style="width: 600px; height: 50px">
      <dv-page  target="parent" fit fullscreen></dv-page>
    </textarea>
   <div style="height: 600px; width: 1066px;  ">
    <dv-page  target="parent" fit fullscreen>
      <h1>大屏页面</h1>
      
    </dv-page>
   </div>
   <br/>
   <h2>组件参数</h2>
   <pre>   
    lock: {
      type: Boolean
    },

    scale: {
      type: Boolean,
      default: true
    },

    width: {
      type: Number,
      default: 1920,
      validator(val) {
        return val > 0
      }
    },

    height: {
      type: Number,
      default: 1080,
      validator(val) {
        return val > 0
      }
    },

    activeIndex: {
      type: Number,
      default: 0
    },

    target: {
      type: [String, HTMLElement, Function],
      default() {
        return document.body
      }
    },

    fit: Boolean,

    fullscreen: Boolean,

    themeSetting: Object,
   </pre>   
   <br/> 
  </div> 
    
</template>
<script setup lang="ts" >
import {DvPage} from '$comp/index';
</script>
<style lang="scss" scoped>
 .page-layout{
  height: 100%;
 }
</style>